<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: abcc
  Date: 2019/10/2
  Time: 17:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${path}/css/person/focuson.css">
    <script src="${path}/plugins/jquery/jquery.min.js" type="text/javascript"></script>
</head>

<body>
<!--导航-->
<%@include file="../sharedper/nav.jsp"%>

<c:if test="${requestScope.flag eq 0}">
<!-- 主体部分 -->
<div class="container">
    <%--${info}--%>
    <div class="zt-header">
        <div class="zt-headerimg">
            <img src="${sessionScope.info.picfilename }" style="height:160px;width:160px" class="zt-tx">
        </div>
    </div>
    <div class="zt-xheader">
        <span>${sessionScope.user.userName}</span>
        <button type="button" class="btn btn-default" data-toggle="button" style="margin-left: 400px" value="1" onclick="editInfo(this)"> 添加宠物
        </button>
        <%--<button type="button" class="btn btn-default" data-toggle="button" onclick="window.location.href='data.html'"> 个人资料--%>
        <button type="button" class="btn btn-default" data-toggle="button" value="0" onclick="editInfo(this)"> 个人资料
        </button>
        <button type="button" class="btn btn-default" data-toggle="button"> 我的草稿
        </button>
        <br>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
            <span class="glyphicon glyphicon-chevron-down" style="line-height: 40px;">&nbsp;更多资料信息</span></a>
        <div id="collapseThree" class="panel-collapse collapse">
            <table width="400">
                <tr>
                    <td>个人简介</td>
                    <td>${sessionScope.info.uStatement}</td>
                </tr>
                <tr>
                    <td>所在地</td>
                    <td>${sessionScope.info.province}&nbsp;${sessionScope.info.city}&nbsp;${sessionScope.info.district}</td>
                </tr>
                <tr>
                    <td>性别</td>
                    <c:if test="${sessionScope.info.uSex==0}">
                        <td>男</td>
                    </c:if>
                    <c:if test="${sessionScope.info.uSex==1}">
                        <td>女</td>
                    </c:if>
                </tr>
                <tr>
                    <td>注册时间</td>
                    <%--<td>${sessionScope.info.uLogintime}pattern="yyyy-MM-dd HH:MM:ss"</td>--%>
                    <td>
                        <fmt:formatDate value="${sessionScope.info.uLogintime}" pattern="yyyy-MM-dd HH:MM:ss"/></td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div class="container" style="width: 1015px">
    <%--<div class="pet-list">--%>
        <%--<span>我的宠物:</span>--%>
        <%--<ul>--%>
            <%--<c:forEach items="${requestScope.petlist}" var="pet" >--%>
                <%--<li>--%>
                    <%--<a href='${path}/edit/pet/${pet.pId}'><img src="${pet.picurl}" alt=""></a>--%>
                    <%--<span style="color: #999;--%>
                        <%--font-size: 12px;">${pet.pName}</span>--%>

                <%--</li>--%>
            <%--</c:forEach>--%>
        <%--</ul>--%>
    <%--</div>--%>


    <div class="col-sm-6 col-md-9" style="margin-top: 20px;background-color: #fff;margin-bottom: 5px;">
        <p class="guan gactive" id="focuson1">我的关注</p>
        <p class="guan" id="focuson2">我的粉丝</p><br>

        <div id="foc1">

        </div>
        <div id="foc2" style="display:none;">

        </div>

</div>


<!-- 右边 -->

            <div class="col-md-3 " style="margin-top: 20px;">
                <div class="card" style="background-color: #fff;">
                    我的成就
                </div>

                <div style="padding: 12px 0; color: #646464;background-color: #fff;">
                    <div style="padding: 6px 20px;">
                                <span class="glyphicon glyphicon-thumbs-up">
                                    获得了${sessionScope.info.myzanNum}个赞
                                </span>
                    </div>
                    <div style="padding: 6px 20px;">
                                <span class="glyphicon glyphicon-comment">
                                    获得了${sessionScope.info.commentNum}个评论
                                </span>
                    </div>
                </div>

                <div class="card" style="align-items:unset;padding-left: 0px;">
                    <div style="display: flex;padding: 12px 0;">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" style="width: 110px;height:85px" onclick="act(0)">
                                        关注了${sessionScope.info.foucNum}人
                                    </button>
                                    <button class="btn btn-default" type="button" style="width: 110px;height:85px" onclick="act(1)">
                                        粉丝${sessionScope.info.fansNum}人
                                    </button>
                                </span>

                    </div>
                </div>
                <div style="background-color: #fff;margin-top: 5px">
                    <a href="#" class="list-group-item">积分${sessionScope.info.uClass}</a>
                    <a href="${path}/info/collect" class="list-group-item">收藏</a>
                    <a href="${path}/info/focu/${sessionScope.user.id}" class="list-group-item">发布</a>
                </div>
            </div>
    </div>
</c:if>
<c:if test="${requestScope.flag eq 1}">
    <%@include file="../sharedper/common.jsp"%>
    <div class="container" style="width: 1015px">
    <div class="col-sm-6 col-md-9" style="margin-top: 20px;background-color: #fff;margin-bottom: 5px;">
        <p class="guan gactive" id="focuson1">我的关注</p>
        <p class="guan" id="focuson2">我的粉丝</p><br>

        <div id="foc1">

        </div>
        <div id="foc2" style="display:none;">

        </div>

    </div>

        <!-- 右边 -->

        <div class="col-md-3 " style="margin-top: 20px;">
            <div class="card" style="background-color: #fff;">
                我的成就
            </div>

            <div style="padding: 12px 0; color: #646464;background-color: #fff;">
                <div style="padding: 6px 20px;">
                    <span class="glyphicon glyphicon-thumbs-up">
                        获得了${requestScope.otherInfo.myzanNum}个赞
                    </span>
                </div>
                <div style="padding: 6px 20px;">
                    <span class="glyphicon glyphicon-comment">
                        获得了${requestScope.otherInfo.commentNum}个评论
                    </span>
                </div>
            </div>

            <div class="card" style="align-items:unset;padding-left: 0px;">
                <div style="display: flex;padding: 12px 0;">
                    <span class="input-group-btn">
                        <%--<a href='${path}/info/otherFocuson'><button class="btn btn-default" type="button" style="width: 110px;height:85px">--%>
                            <%--关注了${requestScope.otherInfo.foucNum}人--%>
                        <%--</button></a>--%>
                        <%--<a href='${path}/info/otherFocuson'><button class="btn btn-default" type="button" style="width: 110px;height:85px">--%>
                            <%--粉丝${requestScope.otherInfo.fansNum}人--%>
                        <%--</button></a>--%>
                        <a href='#'><button class="btn btn-default" type="button" style="width: 110px;height:85px">
                            关注了${requestScope.otherInfo.foucNum}人
                        </button></a>
                        <a href='#'><button class="btn btn-default" type="button" style="width: 110px;height:85px">
                            粉丝${requestScope.otherInfo.fansNum}人
                        </button></a>
                    </span>

                </div>
            </div>
            <div style="background-color: #fff;margin-top: 58px">
                <a href="#" class="list-group-item">积分${requestScope.otherInfo.uClass}</a>
                <a href="${path}/info/collect/${sessionScope.user.id}" class="list-group-item">收藏</a>
                <a href="#" class="list-group-item">发布</a>
            </div>

        </div>
    </div>
</c:if>

<%--目的是为了让外部的is灵活使用项目的上下文路径--%>
<input type="hidden" value="${path}" id="path">

<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>
<script src="${path}/plugins/layui/layui.all.js"></script>
<script src="${path}/js/person/person.js"></script>
<script type="text/javascript">
    window.onload=function(){
        $("#foc1").load("${path}/info/focu",{id:${sessionScope.user.id}});
        $("#foc2").load("${path}/info/fans",{id:${sessionScope.user.id}});
    }


    function act(obj) {
        // alert("uuu");
        var v = obj;
        if(v==0) {
            $("#focuson1").addClass("gactive");
            $("#focuson2").removeClass("gactive");
            $("#foc1").show();
            $("#foc2").hide();
        }else{
            $("#focuson2").addClass("gactive");
            $("#focuson1").removeClass("gactive");
            $("#foc2").show();
            $("#foc1").hide();
        }
    }

    function delFocu(id,userByid) {
        layer.msg('取关成功!!',{
            btn:['我知道了']
        });
        $.post("${path}/del/focu/"+id+"/"+userByid,{id:id,userId:userByid},function (data) {
 //          alert("取关成功!!!")
            alert("取关成功!!");
            $("#"+userByid).attr("style","display:none;");
        });
    }

    function addFocu(id,userByid) {
        // layer.msg('关注成功!!',{
        //     btn:['我知道了']
        // });
        $.post("${path}/add/focu/"+id+"/"+userByid,{id:id,userId:userByid},function (data) {
            layer.msg('关注成功!!',{
                btn:['我知道了']
            });
            var but = id;
            $("#"+but).text("互相关注");
            $("#"+but).attr('disabled',true);
        });
    }
</script>

</body>
</html>
